<template>
    <!-- Form -->
 <!-- dialog窗口 用于添加和编辑的弹窗-->
<el-dialog :title="title" @close="dialogClose"  :visible="visible">
  <el-form :model="stuForm" :rules="stuRules" ref="stuDialogRuleForm">
    <el-form-item label="头像" >
        <el-upload class="uploadAvatar" ref="uploadAvatar"
            action="/api/students/uploadStuAvatar" list-type="picture-card"
            :on-success="uploadSuccess" :on-remove="removeAvatar" :limit="1"
            name="headimgurl" :multiple="false">
            <i class="el-icon-plus"></i>
        </el-upload>
    </el-form-item>
    <el-form-item label="姓名" prop="name" >
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="项目地址" prop="productUrl" >
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="$emit('cancel')">取 消</el-button>
    <el-button type="primary" @click="confirm('stuDialogRuleForm')">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
    export default {
        props:{
            visible:{
                type:Boolean,
                default(){
                    return false
                }
            }
        },
      data() {
        return {
            title:"增加学员信息",
          showAvatar:true,
          stuRules:{
            name:[
                { required: true, message: '请输入名字', trigger: 'blur' }
            ],
            class:[
                { required:true, message:'请输入班级',trigger:'blur'}
            ],
            degree: [
                    { required: true, message: '请输入学历', trigger: 'blur' }
            ],
            city: [
                { required: true, message: '请输入城市', trigger: 'blur' }
            ],
            productUrl: [
                { required: true, message: '请输入项目地址', trigger: 'blur' }
            ],
            age: [
                { required: true, message: '请输入年龄', trigger: 'blur' }
            ],
            description: [
                { required: true, message: '请输入描述', trigger: 'blur' }
            ]
          },
          stuForm:{
                name: '',
                productUrl: '',
                headimgurl: '',
                class: '',
                age: '',
                city: '',
                degree: '',
                description: ''
          },
          oldForm:{},
        };
      },
      
      created () {
        
      },
      mounted () {
        
      },
      methods: {
        dialogClose(){//dialog关闭时触发的回调
            console.log('999');
            //通过父组件传递下来的方法,关闭dialog
            this.$emit('cancel')

        },
        uploadSuccess(r){//图片上传成功的回调
            console.log(r);
            //手动给stuForm的headimgurl赋值
            if (r.state) {
                this.stuForm.headimgurl = r.headimgurl
            } else {
                this.$message.error(r.msg +'-'+r.err)
            }

        },
        removeAvatar(){

        },
        //点击确定按钮
        confirm(forName){
            //本地表单验证
            this.$refs[forName].validate(valid => {
                // console.log(valid);
                // console.log(this.stuForm);
                if (valid) {
                    this.$emit('ok',this.stuForm)
                }

                //清掉图片上传的列表
                // this.$refs.uploadAvatar.clearFiles() 
            })

        }
      }
    };
  </script>

  <style>
    .uploadAvatar {
      text-align: left;
    }
    .el-upload-list__item.is-success,
    .el-upload--picture-card {
      width: 100px !important;
      height: 100px !important;
      line-height: 100px !important;
    }
  .el-dialog__header {
      padding: 0 !important;
      line-height: 60px;
  }
  </style>